import React, { useEffect, useRef } from "react";
import { Typography, Card } from "antd";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import "./Projects.css";

const { Title, Paragraph } = Typography;

gsap.registerPlugin(ScrollTrigger);

interface Project {
  title: string;
  description: string;
  image: string;
  tags: string[];
}

const projects: Project[] = [
  {
    title: "项目一",
    description: "使用 React 和 TypeScript 开发的现代化 Web 应用",
    image: "https://picsum.photos/seed/project1/800/600",
    tags: ["React", "TypeScript", "Ant Design"],
  },
  {
    title: "项目二",
    description: "基于 Node.js 的后端服务开发",
    image: "https://picsum.photos/seed/project2/800/600",
    tags: ["Node.js", "Express", "MongoDB"],
  },
  {
    title: "项目三",
    description: "移动端响应式设计实践",
    image: "https://picsum.photos/seed/project3/800/600",
    tags: ["React Native", "Mobile", "UI/UX"],
  },
  {
    title: "项目四",
    description: "数据可视化仪表板",
    image: "https://picsum.photos/seed/project4/800/600",
    tags: ["D3.js", "Charts", "Dashboard"],
  },
  {
    title: "项目五",
    description: "微服务架构实践",
    image: "https://picsum.photos/seed/project5/800/600",
    tags: ["Microservices", "Docker", "K8s"],
  },
];

const Projects: React.FC = () => {
  const sectionRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const section = sectionRef.current;
    const container = containerRef.current;
    if (!section || !container) return;

    // 计算容器可横向滚动的总距离
    const totalScroll = container.scrollWidth;

    // 创建水平滚动动画
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: section,
        start: "top top",
        end: "+=300%",
        pin: true,
        scrub: 1.5,
        anticipatePin: 1,
      },
    });

    // 添加水平滚动动画
    tl.to(container, {
      x: () => -(totalScroll - window.innerWidth + 48),
      ease: "none",
    });

    // 当滚动到项目部分时触发卡片动画
    ScrollTrigger.create({
      trigger: section,
      start: "top center",
      onEnter: () => {
        gsap.to(".project-card", {
          scale: 1,
          duration: 0.8,
          stagger: 0.2,
          ease: "power3.out",
        });
        gsap.to(".project-card .ant-card-cover img", {
          scale: 1,
          duration: 0.8,
          stagger: 0.2,
          ease: "power3.out",
        });
      },
      onLeaveBack: () => {
        gsap.to(".project-card", {
          scale: 0.95,
          duration: 0.8,
          stagger: 0.1,
          ease: "power3.in",
        });
        gsap.to(".project-card .ant-card-cover img", {
          scale: 1.05,
          duration: 0.8,
          stagger: 0.1,
          ease: "power3.in",
        });
      },
    });

    return () => {
      ScrollTrigger.getAll().forEach((t) => t.kill());
    };
  }, []);

  return (
    <section ref={sectionRef} className="projects-section" id="projects">
      <div className="projects-header">
        <Title level={2} className="section-title">
          我的项目
        </Title>
        <Paragraph className="section-subtitle">
          展示一些我参与开发的精选项目
        </Paragraph>
      </div>
      <div className="projects-container" ref={containerRef}>
        {projects.map((project, index) => (
          <Card
            key={index}
            className="project-card"
            hoverable
            cover={<img alt={project.title} src={project.image} />}
          >
            <Card.Meta
              title={project.title}
              description={project.description}
            />
            <div className="project-tags">
              {project.tags.map((tag, tagIndex) => (
                <span key={tagIndex} className="project-tag">
                  {tag}
                </span>
              ))}
            </div>
          </Card>
        ))}
      </div>
    </section>
  );
};

export default Projects;
